<template>
    <div>
        <div :class="type == 'editor' ? 'type-editor' : 'output-div'">
            <div class="output-result" v-if="id != 3">
                <span class="success">执行成功，</span>执行耗时{{
                    data[id - 2].time ? data[id - 2].time : 0
                }}ms, 执行号{{ id }}
            </div>
            <el-table
                :data="data[id - 2].output"
                v-if="data[id - 2].output"
                border
                style="border-color: #2c2d2e"
                :header-cell-style="{
                    color: '#fff',
                    background: '#353638',
                    borderColor: '#2c2d2e',
                }"
                :cell-style="{
                    color: '#fff',
                    background: '#242527',
                    borderColor: '#2c2d2e',
                }"
            >
                <el-table-column type="index"></el-table-column>
                <el-table-column
                    v-for="item in data[id - 2].tableColumns"
                    :key="item.prop"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                >
                </el-table-column>
            </el-table>
            <div v-if="data[id - 2].comment">{{ data[id - 2].comment }}</div>
        </div>
    </div>
</template>

<script>
import { sqlData } from "./sqlStatements";
export default {
    name: "out-put",
    props: {
        id: Number,
        type: String,
    },
    data() {
        return {
            data: sqlData,
        };
    },
};
</script>

<style scoped>
.output-div {
    color: #fff;
    padding: 16px;
    background-color: rgb(19, 20, 22);
}

.type-editor {
    color: #fff;
    padding: 20px;
}

.output-result {
    margin-bottom: 10px;
}

.success {
    color: rgb(33, 184, 160);
}
</style>
<style>
.el-table__empty-block {
    background: rgb(36, 37, 39);
}

.el-table__empty-text {
    color: #fff !important;
}
</style>
